<template>
  <view v-if="loading" class="debt-list">
    <movable-area class="movableArea" v-if="false">
      <movable-view
        :x="x"
        :y="y"
        direction="all"
        @change="onChange"
        class="movableView"
      >
        <uni-fab
          :content="content"
          horizontal="right"
          :count="confirmtotal"
          direction="vertical"
          @trigger="trigger"
        >
        </uni-fab>
      </movable-view>
    </movable-area>
<!--    <view class="tabs">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="values.state"
        @change="change"
        inactive-color="#FFF"
        active-color="#FFF"
      ></u-tabs>
    </view> -->
	
	<!--
		<view class="tabs d-f-j-c-a-i">
		  <u-search
			placeholder="请按名字搜索"
			height="58"
			v-model="values.name"
			bg-color="#FFF"
			:clearabled="true"
			:show-action="false"
			@search="search"
			shape="square"
		  >
		  </u-search>
		  <view class="select">
			<u-input
			  class="input"
			  v-model="values.type"
			  height="62"
			  :flag="false"
			  type="select"
			  :border="true"
			  placeholder="按状态排序"
			  @click="typeShow = true"
			/>
			<u-select
			  v-model="typeShow"
			  :list="selectList"
			  @confirm="typeConfirm"
			></u-select>
		  </view>
		</view>
	-->
	
	<view class="dept-top">
		<view class="dept-top-left">
			<u-search placeholder="请按名字搜索"
					  height="58"
					  v-model="values.name"
					  bg-color="#FFF"
					  :clearabled="true"
					  :show-action="false"
					  @search="search"
					  shape="square"
					  >
			</u-search>
		</view>
		<view class="dept-top-right" @click="typeShow = true">
			<view class="dept-top-filter">
				<image src="../../../static/images2/icon/icon-sx.png" />
			</view>
			<view class="dept-top-txt">排序</view>
		</view>
		<u-select
		  v-model="typeShow"
		  :list="selectList"
		  @confirm="typeConfirm"
		></u-select>
	</view>
	
	<view class="dept-tab">
		<u-tabs :list="tabList" :is-scroll="false" :bold="false" bg-color="#FFFFFF00" :current="values.state" @change="onTabChange"></u-tabs>
	</view>
	
	<!-- 客户要求去掉 2024-7-22 20:29:53
    <view class="arrears">
      <view class="money"> 当前欠款金额：{{ total_money }}￥ </view>
      <view class="note money"> 合约共{{ total }}张 </view>
    </view>
	 -->
	
    <view class="personam">
      <view v-for="(item, index) in rows" :key="index">
        <view v-if="item.repay_type == 1" @click="debtDetails(item)">
          <disposable :item="item"></disposable
        ></view>
        <view v-if="item.repay_type != 1" @click="debtDetails(item)">
          <stages :item="item"></stages>
		</view>
      </view>
	  
       <u-loadmore :status="status" :icon-type="iconType" margin-top="10" :load-text="loadText" v-if="rows.length>5" />
    </view>
    <u-empty
      text="暂无债务列表"
      mode="list"
      margin-top="368"
      v-if="total == 0"
    ></u-empty>
    <tabBar></tabBar>
  
  </view>
</template>

<script>
import { mapState, mapActions,mapMutations } from "vuex";
import disposable from "@/components/debt/disposable.vue"; //一次性还款
import stages from "@/components/debt/stages.vue"; //分期还款
export default {
  data() {
    return {
      typeShow: false,
      x: 600,
      y: 500,
      iconType: 'flower',
	  loadText: {
		loadmore: '加载更多',
		loading: '努力加载中',
		nomore: '实在没有了'
	 },
      values: {
        name: "",
        state: 0,
        order: "",
        type: "",
		page: 1,
		page_size: 5,
      },
	  current: 0,
	  tabList: [
		  {name: '全部'}, {name: '待确认'}, {name: '进行中'}, {name: '已完结'}, {name: '已逾期'}
	  ]
    };
  },
  components: {
    disposable,
    stages,
  },
  methods: {
    ...mapActions({
      getdebt: "MAY_DEBT/GET_DEBT", //获取债务列表
      getNewDataMore: 'MAY_DEBT/GET_NEW_DATA_MORE', //获取债务列表
      getConfirmed: "MAY_DEBT/GET_CONFIRMED",
    }),
	...mapMutations({
		changeStaus	: 'MAY_DEBT/CHANGE_STATUS', //获取轮播图
	}),
    onChange(e) {
      this.x = e.detail.x;
      this.y = e.detail.y;
    },
    trigger(val) {
      if (val.index == 0) {
        if (this.confirmtotal == "0") {
          uni.showToast({
            title: "暂无待确认合约",
            icon: "error",
            duration: 2000,
          });
          return;
        }
        uni.navigateTo({
          url: "/pages/loanee/mayDebt/confirmation",
        });
      } else {
        uni.navigateTo({
          url: "/pages/loanee/mayDebt/launch",
        });
      }
    },
    //按条件来筛选
    change(index) {
      this.values.state = index;
      this.values.page=1
      let values = JSON.parse(JSON.stringify(this.values));
	  
	  this.search()
      
    },
    //按名字/状态来筛选
    search() {
      this.values.page=1
	  let values = JSON.parse(JSON.stringify(this.values));
		
		let state = values.state
		if (state === 0) {
		  state = ''
		} else {
			state -= 1
		}
	  values.state = state
      this.getdebt(values);
    },
    typeConfirm(e) {
		this.values.page=1
      this.values.order = e[0].value;
      this.values.type = e[0].label;
	  // let values = JSON.parse(JSON.stringify(this.values));
      // if (values.state == 2) {
      //   values.state = 3;
      // }
     // this.getdebt(values);
	 this.search()
    },
    debtDetails(item) {
	  if(item.repay_status === '待确认') {
		  uni.navigateTo({
		    url: `/pages/loanee/mayDebt/receiptDetails?id=${item.id}`,
		  });
		  return
	  }
      uni.navigateTo({
        url: `/pages/loanee/mayDebt/debtDetails?id=${item.id}`,
      });
    },
	onTabChange(val) {
		this.values.state = val
		this.search()
	}
  },
  	onReachBottom(){
         if (this.values.page_size * this.values.page < this.total) {
					this.values.page = this.values.page  + 1
					this.changeStaus('loading')
					
					let values = JSON.parse(JSON.stringify(this.values));
							
					let state = values.state
					if (state === 0) {
						state = ''
					} else {
						state -= 1
					}
					values.state = state
					
					this.getNewDataMore(values)
					
				} else {
					this.changeStaus('nomore')
					
				}
		},
  mounted() {
    uni.showLoading({
      title: "加载中",
    });
  },
  onShow() {
    	this.values.page=1
			this.values.page_size=5
    let values = JSON.parse(JSON.stringify(this.values));
    values.state = "";
    this.getdebt(values);
    this.getConfirmed(this.values);
  },
  computed: {
    ...mapState({
      selectList: (state) => state.MAY_DEBT.selectList, //排序条件数组
      list: (state) => state.MAY_DEBT.listTop, //选择数组
      content: (state) => state.MAY_DEBT.content, //悬浮窗数组
      rows: (state) => state.MAY_DEBT.rows, //债务数组
      total: (state) => state.MAY_DEBT.total, //总数
      total_money: (state) => state.MAY_DEBT.total_money, //总欠款金额
      confirmtotal: (state) => state.MAY_DEBT.confirmtotal, //待确认合约
      loading: (state) => state.MAY_DEBT.loading, //待确认合约
      status: (state) => state.MAY_DEBT.status,
    }),
  },
};
</script>

<style scoped lang='scss'>
.debt-list {
	padding-top: 30rpx;
	min-height: 100%;
	background: #EDF2FC;
}
.dept-top {
	width: 690rpx;
	margin:  0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	&-left {
		flex: 1;
		
		/deep/ {
			.u-search {
				height: 70rpx;
				
				.u-content {
					height: 100% !important;
					border-radius: 100rpx !important;
					border: 1px solid #BFBFBF;
				}
			}
		}
	}
	&-right {
		margin-left: 15rpx;
		display: flex;
	}
	&-filter {
		width: 30rpx;
		height: 30rpx;
		
		uni-image {
			width: 100%;
			height: 100%;
		}
	}
	
	&-txt {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-left: 8rpx;
	}
}

.arrears {
	background: #a3cafa;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	padding: 20rpx 20rpx;
}

.dept-tab {
	height: 80rpx;
	margin-top: 20rpx;
}

.movableArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

  .movableView {
    pointer-events: auto; //可以点击
    width: 120rpx;
    height: 110rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.note {
  position: absolute;
  right: 20rpx;
}

.money {
  font-size: 26rpx;
  color: #0036cb;
}
</style>
<style lang='scss'>
.tabs {
  width: 100%;
  height: 88rpx;
  background-color: #e24d49;
  .u-tabs {
    width: 100%;
    height: 100%;
    background-color: #e24d49 !important;
  }

  .u-search {
    margin-left: 32rpx !important;
    height: 58rpx;
  }

  .select {
    width: 244rpx;
    height: 58rpx;
    margin-left: 16rpx;
	margin-right: 39rpx !important;
    background: #ffffff;
    border-radius: 10rpx;
  }
}
.personam {
  padding-bottom: 130rpx;
}
</style>
<style>
page {
  background: #fafafa;
}
</style>
